<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <div class="filter-item">
        <el-select style="margin-left:10px;" v-model="roleId" placeholder="请选择" @change="roleChange">
          <el-option v-for="item in roleLists" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <div>
      <el-card class="box-card">
        <div class="text item">
          <!-- <el-checkbox :disabled='true' v-model="roleAuthExtra.isAdmin" key="isAdmin" label="超级管理" /> -->
          <el-checkbox :disabled='roleAuthExtra.isAdmin' v-model="roleAuthExtra.showAllProject" key="showAllProject" label="展示所有工程" />
          <el-checkbox :disabled='roleAuthExtra.isAdmin' v-model="roleAuthExtra.loginPc" key="loginPc" label="允许登录后台" />
          <el-checkbox :disabled='roleAuthExtra.isAdmin' v-model="roleAuthExtra.loginPhone" key="loginPhone" label="允许登录手机" />
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top:20px">
        <h3>后台页面权限管理</h3>
        <div class="text item" v-for="menu in roleMenuDatas" style="margin: 10px">
          <div v-for="children in menu.childrens" :key="'menu_' + menu.id + '_' + children.id">
            <div>
              <el-checkbox :disabled='roleAuthExtra.isAdmin' v-model="children.hasAuth" :key="'menu_' + menu.id + '_' + children.id + '_page'" :label="children.name + '页面'" />
            </div>
            <div v-if="children.hasAuth">
              <el-checkbox v-model="children.hasAuth" disabled :key="children.id" :label="'查看'" />
              <el-checkbox :disabled='roleAuthExtra.isAdmin' v-for="element in children.elements" v-model="element.hasAuth" :key="'element_' + menu.id + '_' + children.id + '_' + element.id" :label="element.name" />
            </div>
          </div>
        </div>
      </el-card>
      <el-button style="margin-top:20px" @click='updRoleAuth' type="primary" v-if="upd_role_auth_button_status">提交</el-button>
    </div>
    <!-- :disabled='roleAuthExtra.isAdmin' -->
  </div>
</template>
<script>
import { getAllRoles, queryRoleAuthByRoleId, updRoleAuthByRoleId } from '@/api/role';
import { mapGetters } from 'vuex';

export default {
  name: 'roleAuth',
  created() {
    this.getRoleLists();
    if (this.elements['upd_role_auth']) {
      this.upd_role_auth_button_status = true;
    }
  },
  computed: {
    ...mapGetters(["elements"])
  },
  data() {
    return {
      roleLists: [],
      roleId: undefined,
      // 角色查询参数
      roleQuery: {
        page: 1,
        size: 2147483640,
        param: {
          code: undefined,
          name: undefined
        }
      },
      roleMenuDatas: [],
      roleAuthExtra: {
        isAdmin: false,
        showAllProject: false,
        loginPc: false,
        loginPhone: false
      },
      successCode: 20000,

      upd_role_auth_button_status: false,
    }
  },
  methods: {
    // 查询角色列表
    getRoleLists() {
      getAllRoles(this.roleQuery).then(resp => {
        var code = resp.code;
        var datas = resp.datas;
        this.roleLists = datas.datas;
        if (this.roleLists[0]) {
          this.roleId = this.roleLists[0].id;
          this.getRoleAuth();
          // 查询权限
        }
      });
    },
    // 角色改变
    roleChange(val) {
      console.log("当前角色Id:" + this.roleId);
      this.getRoleAuth();
    },
    // 查收角色权限
    getRoleAuth() {
      queryRoleAuthByRoleId(this.roleId).then(resp => {
        var datas = resp.datas;
        this.roleMenuDatas = datas.menus;
        this.roleAuthExtra = datas.roleAuthExtra;
      });
    },

    updRoleAuth() {
      // 收集数据，提交修改
      var menuids = [];
      var elementids = [];
      this.roleMenuDatas.forEach(roleMenu => {
        roleMenu.childrens.forEach(menu => {
          if (!menu.hasAuth) {
            return;
          }
          if (menuids.filter(x => x === menu.parentId).length <= 0) {
            menuids.push(menu.parentId);
          }
          menuids.push(menu.id);
          menu.elements.forEach(element => {
            if (element.hasAuth) {
              elementids.push(element.id);
            }
          });
        });
      });
      var data = {
        roleId: this.roleId,
        roleExtra: this.roleAuthExtra,
        menuIdLists: menuids,
        elementIdLists: elementids
      };
      updRoleAuthByRoleId(data).then(resp => {
        this.$notify({
          title: "成功",
          message: "保存成功",
          type: "success",
          duration: 2000
        });
      });
    }

  }
}
</script>